<template>
  <view>
    <uni-popup ref="popup" type="center">
		<view class="popup-content">
			<view class="title">
				<text>{{functionName}}</text>
			</view>
			<view class="tbody">
				<view class="click" @click="popup">
					<view class="img">
						<image src="../../static/app-plus/owo/img/aru/E59186E6BB9E_2x.png" mode=""></image>
					</view>
					<text>功能1</text>
				</view>
				<view class="click">
					<view class="img">
						<image src="../../static/h5/owo/img/aru/E5989FE598B4_2x.png" mode=""></image>
					</view>
					<text>功能2</text>
				</view>
				<view class="click">
					<view class="img">
						<image src="../../static/h5/owo/img/aru/E5A4A7E4BDAC_2x.png" mode=""></image>
					</view>
					<text>功能3</text>
				</view>
				<view class="click">
					<view class="img">
						<image src="../../static/h5/owo/img/aru/E6838AE6858C_2x.png" mode=""></image>
					</view>
					<text>功能4</text>
				</view>
				<view class="click">
					<view class="img">
						<image src="../../static/app-plus/owo/img/aru/E8B59E_2x.png" mode=""></image>
					</view>
					<text>功能5</text>
				</view>
				<view class="click">
					<view class="img">
						<image src="../../static/app-plus/owo/img/aru/E59BA7_2x.png" mode=""></image>
					</view>
					<text>功能6</text>
				</view>
				<view class="click">
					<view class="img">
						<image src="../../static/h5/owo/img/aru/E7BEA1E68595_2x.png" mode=""></image>
					</view>
					<text>功能7</text>
				</view>
				<view class="click">
					<view class="img">
						<image src="../../static/h5/owo/img/aru/E884B8E7BAA2_2x.png" mode=""></image>
					</view>
					<text>功能8</text>
				</view>
			</view>
		</view>
	</uni-popup>
  </view>
</template>

<script>

export default {
  name: 'MyPopup',
  data() {
    return {
      showPopup: false,
	  functionName:''
    };
  },
   methods:{
	open(name){
	  this.functionName = name; 
	  this.$refs.popup.open()
	}
 }
};
</script>

<style scoped>
.popup-content {
	width: 92vw;
	border-radius: 15upx;
	background-color: #272A3B;
}
.title {
	color: #87C000;
	text-align: center;
	font-size: 38upx;
	padding-top: 20upx;
	line-height: 55upx;
}
.tbody {
  border-radius: 10upx;
  margin-top: 20upx;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.click {
  width: calc(25% - 1px);
  height: 240upx;
  color: #9A9899;
  font-size: 26upx;
  text-align: center;
  margin-bottom: 1px;
  background-color: #fff;
}
.click .img {
	margin-top: 20upx;
	height: 150upx;
	width: 150upx;
	margin-left: 50%;
	transform: translate(-50%);
}
image {
	width: 100%;
	height: 100%;
}
</style>
